<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:900px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
			require(
		[
			'echarts',
			 'echarts/chart/map'
		],
     function (ec) {
                // 基于准备好的dom，初始化echarts图表
      var myChart = ec.init(document.getElementById('main')); 
      var option = {
    backgroundColor: '#1b1b1b',
    color: ['gold','aqua','lime'],
    title : {
        text: '民生智能',
        subtext:'数据分析',
        x:'center',
        textStyle : {
            color: '#fff'
        }
    },
    tooltip : {
        trigger: 'item',
        formatter: '{b}'
    },
    legend: {
        orient: 'vertical',
        x:'left',
        data:['郑州', '开封', '信阳'],
        selectedMode: 'single',
        selected:{
            '开封' : false,
            '信阳' : false
        },
        textStyle : {
            color: '#fff'
        }
    },
    toolbox: {
        show : true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataRange: {
        min : 0,
        max : 100,
        calculable : true,
        color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
        textStyle:{
            color:'#fff'
        }
    },
    animationDurationUpdate: 2000, // for update animation, like legend selected.
    series : [
        {
            name: '郑州',
            type: 'map',
            roam: true,
            hoverable: false,
            mapType: '河南',
            itemStyle:{
                normal:{
                    borderColor:'rgba(100,149,237,1)',
                    borderWidth:0.5,
                    areaStyle:{
                        color: '#1b1b1b'
                    }
                }
            },
            data:[],
            geoCoord: {
                '焦作':[113.211836,35.234608],
                '新乡':[113.91269,35.307258],
                '信阳':[114.085491,32.128582],
                '郑州':[113.649644,34.75661],
				'洛阳':[112.447525,34.657368],
				'南阳':[112.542842,33.01142],
				'开封':[114.351642,34.801854],
                '驻马店':[114.049154,32.983158],
                '安阳':[114.351807,36.110267],
                '平顶山':[113.300849,33.745301],
				'鹤壁':[114.29777,35.755426],
                '濮阳':[115.026627,35.753298],
                '许昌':[113.835312,34.02674],
                '漯河':[114.046061,33.576279],
				'三门峡':[111.181262,34.78332],
				'商丘':[115.641886,34.438589],
                '周口':[114.654102,33.623741],
				
            },
            markLine : {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 1,
                    period: 30,
                    color: '#fff',
                    shadowBlur: 10
                },
                itemStyle : {
                    normal: {
                        borderWidth:1,
                        label: {
                            show: false
                        },
                        lineStyle: {
                            type: 'solid',
                            shadowBlur: 10
                        }
                    }
                },
                data : [
                    [{name:'郑州', smoothness:0.2}, {name:'信阳',value:95}],
					[{name:'郑州', smoothness:0.3}, {name:'焦作',value:90}],
                    [{name:'郑州', smoothness:0.4}, {name:'新乡',value:80}],
                    [{name:'郑州', smoothness:0.5}, {name:'洛阳',value:70}],
                    [{name:'郑州', smoothness:0.6}, {name:'南阳',value:60}],
                    [{name:'郑州', smoothness:0.2}, {name:'开封',value:50}],
                    [{name:'郑州', smoothness:0.3}, {name:'驻马店',value:40}],
                    [{name:'郑州', smoothness:0.4}, {name:'安阳',value:30}],
                    [{name:'郑州', smoothness:0.5}, {name:'平顶山',value:20}], 
                    [{name:'郑州', smoothness:0.6}, {name:'鹤壁',value:10}],
					[{name:'郑州', smoothness:0.5}, {name:'濮阳',value:70}],
                    [{name:'郑州', smoothness:0.6}, {name:'许昌',value:60}],
                    [{name:'郑州', smoothness:0.2}, {name:'漯河',value:50}],
                    [{name:'郑州', smoothness:0.3}, {name:'三门峡',value:40}],
                    [{name:'郑州', smoothness:0.4}, {name:'商丘',value:30}],
                    [{name:'郑州', smoothness:0.5}, {name:'周口',value:20}],
					
                ]
            },
			 markPoint : {
                symbol:'emptyCircle',
                symbolSize : function (v){
                    return 10 + v/10
                },
                effect : {
                    show: true,
                    shadowBlur : 0
                },
                itemStyle:{
                    normal:{
                        label:{show:false}
                    },
                    emphasis: {
                        label:{position:'top'}
                    }
                },
                data : [
                    {name:'信阳',value:10},
					{name:'郑州',value:95},
                    {name:'洛阳',value:90},
                    {name:'焦作',value:80},
                    {name:'开封',value:70},
                    {name:'驻马店',value:60},
                    {name:'南阳',value:50},
                    {name:'平顶山',value:40},
                    {name:'安阳',value:30},
                    {name:'鹤壁',value:20},
                    {name:'新乡',value:10},
					{name:'濮阳',value:70},
                    {name:'许昌',value:60},
                    {name:'漯河',value:50},
                    {name:'三门峡',value:40},
                    {name:'商丘',value:30},
                    {name:'周口',value:20},
                ]
            }
        },
        {
            name: '焦作',
            type: 'map',
            mapType: '河南',
            data:[],
            markLine : {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 1,
                    period: 30,
                    color: '#fff',
                    shadowBlur: 10
                },
                itemStyle : {
                    normal: {
                        borderWidth:1,
                        label: {
                            show: false
                        },
                        lineStyle: {
                            type: 'solid',
                            shadowBlur: 10
                        }
                    }
                },
                data : [
                    <!-- [{name:'郑州', smoothness:0.2}, {name:'焦作',value:95}], -->
					
                ]
            }
        },
		{
            name: '新乡',
            type: 'map',
            mapType: '河南',
            data:[],
            markLine : {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 1,
                    period: 30,
                    color: '#fff',
                    shadowBlur: 10
                },
                itemStyle : {
                    normal: {
                        borderWidth:1,
                        label: {
                            show: false
                        },
                        lineStyle: {
                            type: 'solid',
                            shadowBlur: 10
                        }
                    }
                },
                data : [
                    <!-- [{name:'郑州', smoothness:0.2}, {name:'新乡',value:95}], -->
                ]
            }
        },
        <!-- { -->
            <!-- name: '信阳', -->
            <!-- type: 'map', -->
            <!-- mapType: '河南', -->
            <!-- data:[], -->
            <!-- markLine : { -->
                <!-- smooth:true, -->
                <!-- effect : { -->
                    <!-- show: true, -->
                    <!-- scaleSize: 1, -->
                    <!-- period: 30, -->
                    <!-- color: '#fff', -->
                    <!-- shadowBlur: 10 -->
                <!-- }, -->
                <!-- itemStyle : { -->
                    <!-- normal: { -->
                        <!-- borderWidth:1, -->
                        <!-- label: { -->
                            <!-- show: false -->
                        <!-- }, -->
                        <!-- lineStyle: { -->
                            <!-- type: 'solid', -->
                            <!-- shadowBlur: 10 -->
                        <!-- } -->
                    <!-- } -->
                <!-- }, -->
				 
                <!-- data : [ -->
                    <!-- [{name:'郑州', smoothness:0.2}, {name:'信阳',value:95}], -->
                <!-- ] -->
				
            <!-- } -->
			
        <!-- }, -->
		 {
            name: '信阳',
            type: 'map',
            mapType: '河南',
            data:[],
            markLine : {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 1,
                    period: 30,
                    color: '#fff',
                    shadowBlur: 10
                },
                itemStyle : {
                    normal: {
                        borderWidth:1,
                        lineStyle: {
                            type: 'solid',
                            shadowBlur: 10
                        }
                    }
                },
                data : [
                     [{name:'信阳', smoothness:0.2}, {name:'郑州',value:95}],
                
                ]
            },
            markPoint : {
                symbol:'emptyCircle',
                symbolSize : function (v){
                    return 10 + v/10
                },
                effect : {
                    show: true,
                    shadowBlur : 0
                },
                itemStyle:{
                    normal:{
                        label:{show:false}
                    },
                    emphasis: {
                        label:{position:'top'}
                    }
                },
                data : [
                    {name:'信阳',value:10},
					{name:'郑州',value:95},
                    {name:'洛阳',value:90},
                    {name:'焦作',value:80},
                    {name:'开封',value:70},
                    {name:'驻马店',value:60},
                    {name:'南阳',value:50},
                    {name:'平顶山',value:40},
                    {name:'安阳',value:30},
                    {name:'鹤壁',value:20},
                    {name:'新乡',value:10},
					{name:'濮阳',value:70},
                    {name:'许昌',value:60},
                    {name:'漯河',value:50},
                    {name:'三门峡',value:40},
                    {name:'商丘',value:30},
                    {name:'周口',value:20},
                ]
            }
        }
    ]
};
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    </script>
</body>